// eslint-disable-next-line import/no-named-as-default
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { useEffect, useLayoutEffect, useState } from "react";
import { uniqueId } from "lodash-es";
import { Paragraph } from "@/components";
import style from "./index.module.scss";

interface TabBarProps {
  tabs: string[];
  activeTabIdx: number;
  onTabClickCb: (tabIndex: number) => void;
  type?: "default" | "discover";
}

const TAB_CLASS_TAG = "tab-bar-";
export const DISCOVER_TAB_BAR_HEIGHT = 47;

const C36TabBarStandalone = ({
  tabs,
  type = "default",
  activeTabIdx,
  onTabClickCb,
}: TabBarProps) => {
  // For query, need a unique ID
  const [tabBarId] = useState(uniqueId(TAB_CLASS_TAG));
  const [tabIndicatorWidth, setTabIndicatorWidth] = useState(0);
  const [tabElementDims, setTabElementDims] = useState<
    Taro.NodesRef.BoundingClientRectCallbackResult[]
  >([]);
  const [tabIndicatorLocation, setTabIndicatorLocation] = useState(0);

  useLayoutEffect(() => {
    // Returns null for useEffect, useLayoutEffect and useReady-hooks
    // blog.csdn.net/weixin_33895695/article/details/93211739
    // May be able to use next-tick-hook perhaps?
    setTimeout(() => {
      Taro.createSelectorQuery()
        .selectAll(`.${tabBarId}-tab`)
        .boundingClientRect((rectArr) => {
          const rectArrCast =
            rectArr as unknown as Taro.NodesRef.BoundingClientRectCallbackResult[];
          setTabElementDims(rectArrCast);
        })
        .exec();
    }, 200);
  }, [tabBarId]);

  const setIndicatorDims = () => {
    if (tabElementDims.length) {
      const activeTabEl = tabElementDims[activeTabIdx];
      setTabIndicatorLocation(activeTabEl.left - tabElementDims[0].left);
      setTabIndicatorWidth(activeTabEl.width);
    }
  };

  useEffect(() => {
    setIndicatorDims();
  }, [activeTabIdx, tabElementDims]);

  const onTabClick = (tabIdx) => {
    onTabClickCb(tabIdx);
    setIndicatorDims();
  };

  return (
    <View
      className={`
        ${style["tab-wrapper"]}
        ${tabs.length === 1 ? style["single-item"] : ""}
        ${style[type]}`}
      style={type === "discover" ? { height: DISCOVER_TAB_BAR_HEIGHT } : {}}
    >
      {tabs.map((tabText, tabIdx) => (
        <Paragraph
          onClick={(_) => {
            onTabClick(tabIdx);
          }}
          key={tabText}
          className={`${style["tab"]} 
          ${tabBarId}-tab
          ${tabIdx === activeTabIdx ? style["active"] : ""} 
          ${type === "default" ? style["tab-default"] : style["tab-discover"]}
          `}
          id={`${tabBarId}-${tabIdx}`}
          color="dark"
          size={type === "default" ? "small" : undefined}
          noSpacing
        >
          {tabText}
        </Paragraph>
      ))}
      <View
        className={`${style["active-tab-indicator"]} ${style[type]}`}
        style={{
          width: tabIndicatorWidth,
          transform: `translateX(${tabIndicatorLocation}px)`,
        }}
      />
    </View>
  );
};

export default C36TabBarStandalone;
